<template>
  <div class="doc-view-container">
    <!-- 文档头部信息 -->
    <div class="doc-header">
      <div class="header-left">
        <el-button icon="el-icon-back" type="text" @click="goBack">返回</el-button>
        <div class="doc-title">
          <span class="label">档号：</span>
          <span class="value">{{ docInfo.dh }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-button-group>
          <el-button 
            type="primary" 
            icon="el-icon-printer" 
            size="small"
            @click="handlePrint"
          >打印</el-button>
      
        </el-button-group>
      </div>
    </div>

    <!-- 文档内容区 -->
    <div class="doc-content" v-loading="loading">
      <!-- 基本信息 -->


      <!-- 文档正文 -->
      <el-card class="content-card">
        <div slot="header" class="content-header">
          <span>文档内容</span>
          <div class="tools">
            <el-tooltip content="放大字体" placement="top">
              <el-button 
                type="text" 
                icon="el-icon-zoom-in"
                @click="changeFontSize('increase')"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="缩小字体" placement="top">
              <el-button 
                type="text" 
                icon="el-icon-zoom-out"
                @click="changeFontSize('decrease')"
              ></el-button>
            </el-tooltip>
          </div>
        </div>
        <div 
          class="doc-text" 
          :style="{ 
            fontSize: fontSize + 'px',
            padding: '40px'
          }"
          v-html="docInfo.content"
        ></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { artApi } from "@/api/art";

export default {
  name: 'DocView',

  data() {
    return {
      loading: false,
      docInfo: {
        id: '',
        dh: '',
        content: '',
        createTime: ''
      },
      fontSize: 14
    }
  },

  created() {
    this.fetchDocInfo()
  },

  methods: {
    // 获取文档信息
    async fetchDocInfo() {
      try {
        this.loading = true
        const id = this.$route.query.id
        if (!id) {
          this.$message.error('文档ID不能为空')
          this.goBack()
          return
        }

        const response = await artApi('getfulltxtById', { _id: id, searchContent: this.$route.query.searchContent })
        if (response.code === 200) {
          this.docInfo = {
            id: response.data._source.id,
            dh: response.data._source.dh,
            content: response.data.highlight?.content?.[0] || response.data._source.content,
            createTime: this.formatTime(new Date().getTime())
          }
        } else {
          this.$message.error('获取文档信息失败')
        }
      } catch (error) {
        console.error('获取文档信息出错：', error)
        this.$message.error('获取文档信息失败，请重试')
      } finally {
        this.loading = false
      }
    },

    // 返回上一页
    goBack() {
      // 获取当前URL中的参数
      const searchContent = this.$route.query.searchContent || ''
      // 返回到全文检索页面，并保留搜索关键词
      this.$router.push({
        path: '/graphquery/fulltext',
        query: { keyword: searchContent }
      })
    },

    // 打印文档
    handlePrint() {
      window.print()
    },

    // 下载文档
    async handleDownload() {
      try {
        const response = await artApi('downloadDoc', { 
          id: this.docInfo.id,
          dh: this.docInfo.dh 
        })
        
        if (response.code === 200) {
          // 创建下载链接
          const link = document.createElement('a')
          link.href = response.data.url
          link.download = `${this.docInfo.dh}.pdf`
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        } else {
          this.$message.error('下载失败，请重试')
        }
      } catch (error) {
        console.error('下载文档失败：', error)
        this.$message.error('下载失败，请重试')
      }
    },

    // 调整字体大小
    changeFontSize(type) {
      if (type === 'increase' && this.fontSize < 24) {
        this.fontSize += 2
      } else if (type === 'decrease' && this.fontSize > 12) {
        this.fontSize -= 2
      }
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.doc-view-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .doc-header {
    background: #fff;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-left {
      display: flex;
      align-items: center;
      gap: 20px;

      .doc-title {
        font-size: 16px;
        
        .label {
          color: #909399;
          margin-right: 8px;
        }
        
        .value {
          color: #303133;
          font-weight: 500;
        }
      }
    }
  }

  .doc-content {
    .info-card {
      margin-bottom: 20px;
    }

    .content-card {
      .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tools {
          display: flex;
          gap: 10px;
        }
      }

      .doc-text {
        padding: 20px;
        line-height: 1.8;
        color: #303133;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }
  }
}

// 打印样式
@media print {
  .doc-header {
    display: none !important;
  }

  .el-card {
    box-shadow: none !important;
    border: none !important;
  }

  .content-header {
    .tools {
      display: none !important;
    }
  }
}
</style> 